<template>
  <div>
    <div style="width: 1000px; margin: 20px auto">
      <img src="images/log6.png" alt="" style="width: 400px" />
      <span
        ><router-link
          to="/main"
          style="
            margin-left: 450px;
            font-size: 12px;
            color: ##999;
            text-decoration: none;
          "
          >返回首页</router-link
        ></span
      >
    </div>

    <div
      style="
        margin: 20px auto;
        width: 800px;
        height: 400px;
        border: 1px solid #ccc;
      "
    >
      <span
        style="
          width: 800px;
          height: 30px;
          line-height: 30px;
          font-weight: 600;
          color: #888;
          border-bottom: 1px solid #ccc;
          display: block;
          text-indent: 10px;
        "
        >名鞋库用户注册</span
      >
      <div>
        <form style="float: left">
          <p>
            &nbsp;&nbsp;&nbsp;用户名:
            <input v-model="form.username" name="username" />
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码:
            <input v-model="form.password" name="password" type="password" />
          </p>
          <p>
            确认密码:
            <input v-model="form.password1" name="password1" type="password" />
          </p>
          <p>
            验证码:
            <input type="text" v-model="msg" style="width: 50px" />&nbsp;
            <span
              style="
                line-height: 20px;
                display: inline-block;
                width: 60px;
                height: 20px;
                background-color: #999;
              "
              >8538</span
            >&nbsp;
            <a
              @click="Toast"
              href="javaScript:void(0)"
              style="color: #999; text-decoration: none; font-size: 12px"
              >换个图片</a
            >
          </p>
          <p>
            <input type="checkbox" v-model="checked" />
            <span style="font-size: 12px">我已阅读并同意</span
            ><a href="javaScript:void(0)" style="font-size: 12px; color: blue"
              >名鞋库会员注册协议</a
            >.
          </p>
          <p>
            <button
              @click.prevent="register"
              style="
                background-color: #f00;
                border: none;
                color: white;
                width: 80px;
                height: 30px;
                padding: 5px;
                font-size: 12px;
              "
            >
              注册新用户
            </button>
          </p>
        </form>
        <div
          style="
            float: left;
            width: 250px;
            margin-top: 50px;
            text-align: center;
          "
        >
          <span style="font-size: 12px; margin-top: 40px; display: block"
            >已经有名鞋库账号?</span
          >
          <br />
          <button
            style="
              padding: 5px 10px;
              color: red;
              background-color: #ece2d3;
              border: 1px solid orange;
              margin-bottom: 40px;
            "
          >
            <router-link to="/login" style="color: #c66; text-decoration: none"
              >现在登录</router-link
            >
          </button>
          <br />
          <span style="color: orange">会员全场满399即可免邮!</span>
          <br />
          <span style="font-size: 12px">(货到付款及赠品除外)</span>
        </div>
      </div>
    </div>
    <img
      src="images/log3.png"
      alt=""
      style="width: 1000px; margin: 10px auto; display: block"
    />
  </div>
</template>

<script>
import { Register } from '@/api/register'
import { Toast } from 'vant'
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        password1: ''
      },
      msg: '',
      checked: false
    }
  },
  methods: {
    Toast() {
      Toast('该功能未开发,请敬请期待!')
    },
    register() {
      if (this.msg == '' || this.msg == null) {
        Toast('请输入验证码!')
      } else if (this.msg != 8538) {
        Toast('请输入正确的验证码!')
      } else if (this.checked != true) {
        Toast('请勾选同意注册协议!')
      } else {
        Register(this.form)
          .then((res) => {
            Toast(res.data.msg)
            if (res.data.code == 1) {
              setTimeout(() => {
                this.$router.push('login')
              }, 1000)
            }
          })
          .catch((err) => {
            Toast(err.response.data.msg)
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
form {
  margin-top: 30px;
  width: 500px;
  height: 280px;
  border-right: 1px dotted #ccc;
  text-align: center;
  padding: 10px;
}

form p {
  margin-top: 20px;
}

img {
  cursor: pointer;
}
</style>
